<template>
    <div class="GoodsManagement">
        <div style="height: 100%;">
            <el-container>
                <el-header>
                    <el-radio-group v-model="tabType" size="small" :fill="fillColor" @change="changeType">
                        <el-radio-button label="all">全部商品(20)</el-radio-button>
                        <el-radio-button label="stock">库存预警(10)</el-radio-button>
                    </el-radio-group>
                </el-header>
                <el-container>
                    <!-- 侧边分类栏 -->
                    <el-aside width="200px">
                        <div class="categoryList">
                            <div class="categoryList_item" @click="changeCategory(item)" v-for="item in categoryList"
                                :key="item.id"
                                :style="{ backgroundColor: categoryID == item.id ? 'rgb(200, 223, 242)' : '' }">
                                <div class="categoryList_item_tag">
                                    <el-tag effect="dark" size="mini">在售</el-tag>
                                </div>
                                <div class="categoryList_item_name">{{ item.name }}({{ item.number }})</div>
                            </div>
                        </div>
                    </el-aside>
                    <el-main>
                        <el-container>
                            <!-- 商品搜索 -->
                            <el-header>
                                <div class="mainHeader_Left">
                                    <el-input placeholder="商品名称" prefix-icon="el-icon-search" v-model="searchValue"
                                        style="border-radius: 30px;" size="small"></el-input>
                                </div>
                                <div class="mainHeader_right">
                                    <el-button-group>
                                        <el-button size="small" plain @click="buttonGroupAction('上架')">上架</el-button>
                                        <el-button size="small" plain @click="buttonGroupAction('下架')">下架</el-button>
                                        <el-button size="small" plain @click="buttonGroupAction('删除')">删除</el-button>
                                    </el-button-group>
                                    <el-button size="small" type="primary" @click="TOAddGoods">新增商品</el-button>
                                    <el-button size="small" type="primary" @click="dialogVisible = true">导入商品</el-button>
                                </div>

                            </el-header>
                            <!-- 商品表格 -->
                            <el-main>
                                <el-table ref="multipleTable" :key="tableDataKey" :data="tableData" tooltip-effect="dark"
                                    style="width: 100%" @selection-change="handleSelectionChange"
                                    :header-cell-style="{ background: '#F8FBFF' }">
                                    <el-table-column type="selection" width="45">
                                    </el-table-column>
                                    <el-table-column label="商品" width="200">
                                        <template slot-scope="scope">
                                            <div class="table_goods">
                                                <img :src="scope.row.images" alt="">
                                                <p>{{ scope.row.name }}</p>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="价格/规格" width="200">
                                        <template slot-scope="scope">
                                            <div>
                                                <p>￥{{ parseFloat(scope.row.price).toFixed(2) }} /
                                                    {{ scope.row.specs }}</p>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="stock_num" label="销售库存" align="center">
                                    </el-table-column>
                                    <el-table-column prop="address" label="状态" width="150">
                                        <template slot-scope="scope">
                                            <div class="table_status">
                                                <p :class="{ isUse: item.status == 1 }" :key="index"
                                                    v-for="(item, index) in   scope.row.platform  ">
                                                    <span>·</span>{{ item.platform }}
                                                </p>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="200">
                                        <template slot-scope="scope">
                                            <div class="table_action">
                                                <el-button type="text" size="small"
                                                    @click="handleGroundingDialog(scope.row)"
                                                    :style="{ 'color': scope.row.platform[0].status == 1 && scope.row.platform[1].status == 1 ? 'black' : '' }">
                                                    {{ scope.row.platform[0].status == 1 && scope.row.platform[1].status ==
                                                        1 ? '下架' : '上架' }}
                                                </el-button>
                                                <el-button type="text" size="small" style="color: black;"
                                                    @click="handleEdit(scope.row)">编辑</el-button>
                                                <el-button type="text" size="small" style="color: red;"
                                                    @click="handleDelete(scope.row)">删除</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-main>
                        </el-container>
                    </el-main>
                </el-container>
            </el-container>

            <!-- 上架操作对话框 -->
            <el-dialog :title="`请选择${groundingText}平台`" :visible.sync="grounding_Dialog" width="400px">
                <div>
                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
                        style="margin-bottom: 10px;">全选</el-checkbox>
                    <el-checkbox-group v-model="checkedPlatform" @change="handleCheckedPlatformsChange">
                        <el-checkbox label="前台" key="1">前台</el-checkbox>
                        <el-checkbox label="小程序" key="2">小程序</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="grounding_Dialog = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="handleOffShelf" size="small">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 删除提醒对话框 -->
            <el-dialog title="收货地址" :visible.sync="dialog_delete" :show-close=false width="400px">
                <div slot="title" class="dialog_title_delete">
                    <i class="el-icon-warning-outline"></i>观视界提醒您
                </div>
                <div style="padding: 0 20px;">
                    <p v-if="buttonGroupActionText == '删除'">您确定要删除所选的{{ this.multipleSelection.length }}个商品吗?若商品存在库存将退回仓库中
                    </p>
                    <p v-if="buttonGroupActionText == '表格删除'">确认要删除该商品吗?</p>
                    <p v-if="buttonGroupActionText == '上架'">确认要上架所选的{{ this.multipleSelection.length }}个商品吗?</p>
                    <p v-if="buttonGroupActionText == '下架'">确认要下架所选的{{ this.multipleSelection.length }}个商品吗?</p>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialog_delete = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="confirmDelete" size="small" v-if="buttonGroupActionText == '表格删除'">
                        确 定
                    </el-button>
                    <el-button type="primary" @click="confirmAction" size="small" v-else>确 定</el-button>

                </div>
            </el-dialog>
            <ImportGoods :dialogVisible="dialogVisible" @updateDialogVisible="dialogVisible = false"></ImportGoods>
        </div>

    </div>
</template>
<script>
import ImportGoods from '../../components/importGoods/importGoods.vue'

export default {
    components: {
        ImportGoods
    },
    data() {
        return {
            tabType: 'all',
            fillColor: '',//按钮填充颜色
            buttonGroupActionText: '',//右侧按钮组

            goodsID: 0,// 当前操作的商品id
            searchValue: '',// 搜索框数据

            tableData: [],//表格数据
            tableDataKey: false,//表格key
            categoryList: [],//分类列表
            categoryID: 0,//当前选中的分类ID

            multipleSelection: [],//选中的商品
            checkAll: false,//选择平台
            checkedPlatform: [],//上架平台
            groundingText: '上架',//上架下架对话框标题
            grounding_Dialog: false,//上架对话框
            dialog_delete: false,//删除提醒对话框
            dialogVisible: false,//导入商品对话框组件
        }
    },
    created() {
        this.getCategory()

    },
    methods: {
        /**
         * 按钮组操作
         * @param {*} action 操作 删除/上架/下架
         */
        buttonGroupAction(action) {
            if (this.multipleSelection.length == 0) {
                this.$message.error('您还未选择商品哦！')
                return
            }
            this.buttonGroupActionText = action
            this.dialog_delete = true
        },
        // 确认操作
        confirmAction() {
            console.log(this.multipleSelection, this.buttonGroupActionText);
            let ids = []
            this.multipleSelection.forEach(item => {
                ids.push(item.id)
            })
            if (this.buttonGroupActionText == '下架' || this.buttonGroupActionText == '上架') {
                this.dialog_delete = false
                this.grounding_Dialog = true
                this.goodsID = ids.join(',')
                this.groundingText = this.buttonGroupActionText == '下架' ? '下架' : '上架'
            } else if (this.buttonGroupActionText == '删除') {
                let data = {
                    goods_id: ids.join(','),
                }
                this.deleteGoods(data)
            }
            // this.multipleSelection = []
        },
        /**
         * 
         * @param {*} data 删除商品 id
         */
        deleteGoods(data) {
            console.log(data, 'data删除商品');
            this.my_request('supplier/market/goods', data, 'DELETE').then(res => {
                console.log(res, '删除商品结果');
                let { code, message } = res.data
                if (200 === code) {
                    this.dialog_delete = false
                    this.$message.success('删除成功')
                    this.getCategory()
                } else {
                    this.dialog_delete = false
                    this.$message.error(message)
                }
            })
        },

        // 多选商品
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // console.log(this.multipleSelection, 'this.multipleSelection');
        },


        // 导入商品
        importGoods() {
            // api/supplier/market/goods/import
            let data = {
                goods_list: []
            }
        },

        /**
         * 新增按钮
         */
        TOAddGoods() {
            this.$router.push('/Supermarket/AddGoods');
        },
        /**表格右上按钮 */



        /**表格操作 */

        //删除商品
        handleDelete(row) {
            this.goodsID = row.id
            this.dialog_delete = true
            this.buttonGroupActionText = '表格删除'

        },
        // 表格确认删除商品
        confirmDelete() {
            let data = {
                goods_id: this.goodsID,
            }
            this.deleteGoods(data)
        },

        // 跳转到编辑页面
        handleEdit(row) {
            this.$router.push({ name: 'AddGoods', params: { id: row.id } });
        },

        /**
         * 打开上架操作对话框
         * @param {*} row 信息
         */
        handleGroundingDialog(row) {
            console.log(row, 'row');

            this.grounding_Dialog = true
            this.goodsID = row.id
            this.groundingText = row.platform[0].status == 1 && row.platform[1].status == 1 ? '下架' : '上架'
            this.checkedPlatform = []
            row.platform.forEach(element => {
                if (element.status == 1) {//1，已上架
                    this.checkedPlatform.push(element.platform)
                }
            });
            this.handleCheckedPlatformsChange(this.checkedPlatform)//判断是否全选
        },
        // 确认商品上下架
        handleOffShelf() {
            if (this.checkedPlatform.length == 0) {
                this.$message.error('您还未选择平台哦！')
                return
            }
            let platform = []
            this.checkedPlatform.forEach(item => {
                item == "前台" ? platform.push(1) : platform.push(2)
            })
            let data = {
                goods_id: this.goodsID,
                platform: platform.join(','),// 平台1前台 2 小程序
                status: this.groundingText == '上架' ? 1 : 0
            }
            console.log(data, '商品上下架data');
            this.my_request('supplier/market/goods/change', data, 'PUT').then(res => {
                console.log(res, '商品上下架结果');
                let { code, message } = res.data
                if (200 === code) {
                    this.$message.success(message)
                    this.grounding_Dialog = false
                    this.multipleSelection = []
                    this.getCategory()
                } else {
                    this.$message.error(message)
                }
            })
        },

        /**END表格操作 */



        // 改变分类
        changeCategory(item) {
            this.categoryID = item.id
            this.getInit()
        },
        // 改变按钮  全选/库存预警
        changeType() {
            this.fillColor = this.tabType == 'all' ? '' : 'red'
            this.categoryID = 0
            this.getCategory()
        },

        // 上架对话框多选按钮
        handleCheckAllChange(val) {
            this.checkedPlatform = val ? ['小程序', '前台'] : [];
        },
        handleCheckedPlatformsChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === 2
        },



        /**获取数据 */

        // 数据初始化
        getInit() {
            // 获取商品数据
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
                platform: 0,
                category_id: this.categoryID,
                stock: this.tabType == 'all' ? 0 : 1//库存预警 传1
            }
            console.log(data, '获取商品数据data');
            this.my_request('supplier/market/goods/list', data, 'GET').then(res => {
                console.log(res, '获取商品数据res');
                let { code, data } = res.data
                if (200 == code) {
                    this.tableData = data
                    this.tableDataKey = !this.tableDataKey
                }
            })
        },

        // 获取商品分类及分类下的商品数量
        getCategory() {
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
                platform: 0,
                stock: this.tabType == 'all' ? 0 : 1//库存预警 传1
            }
            this.my_request('/supplier/market/goods/category', data).then(res => {
                console.log(res, '获取商品分类及分类下的商品数量res');
                let { code, data } = res.data
                if (200 === code) {
                    this.categoryList = data
                    if (this.categoryID == 0) {
                        this.categoryID = data[0].id
                    }
                    this.getInit()

                }
            })
        },

        /**END获取数据 */



    }
}
</script>


<style lang="scss" scoped>
.dialog_title_delete {
    display: flex;
    align-items: center;

    i {
        color: #FFAA5C;
        margin-right: 5px;
    }
}

.GoodsManagement {
    // background-color: white;
    margin: 20px;
    // margin-left: 10px;
    width: calc(100% -40px);
    height: calc(100% - 140px);
}

.el-container {
    height: 100%;
}

.el-header {
    // background-color: #B3C0D1;
    height: 33px !important;
    padding: 0 !important;
}


.el-aside {
    background-color: white;
    color: #333;
    width: 160px !important;
    padding: 15px 0;

    // height: 100%;
    .categoryList {
        .categoryList_item {
            padding: 5px 20px;
            display: flex;
            align-items: center;
            height: 30px;
            margin-bottom: 10px;

            .categoryList_item_name {
                margin-left: 10px;
                font-size: 14px;
            }
        }
    }
}

.el-main {
    margin: 0 10px;
    color: #333;
    background-color: white;

    // height: 100% !important
    .el-header {
        height: 35px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .mainHeader_Left {
            .el-input {
                border-radius: 30px;
            }
        }

        .mainHeader_right {
            .el-button-group {
                margin-right: 10px;
            }
        }
    }

    .el-main {
        // padding: 10px 0;
        margin: 10px 0 !important;
        border: 1px solid #d1d1d1;

        .table_goods {
            display: flex;
            align-items: center;

            img {
                height: 40px;
                width: 40px;
                margin-right: 10px;
            }
        }

        .table_status {
            font-size: 12px;
            color: #999999;

            p {
                display: flex;
                align-items: center;

                span {
                    font-size: 30px;
                    margin-right: 5px;
                }
            }

            .isUse {
                color: #1989FA;

            }
        }
    }
}

// 搜索框
::v-deep {
    .mainHeader_Left {
        .el-input__inner {
            border-radius: 30px;
        }
    }
}
</style>
